<style lang="less">
</style>
<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          建筑物管理
        </p>
        <div slot="extra">
          <Button icon="md-add" type="primary" @click="addModdel">添加</Button>
        </div>

        <Row class="margin-bottom-20" type="flex" justify="space-between" :gutter="16">
          <!-- 筛选内容 -->
          <Col :span="12">
          <Row :gutter="16">
            <!-- <Col :span="6">
                            <Input v-model="search.deviceId" placeholder="请输入要查找的设备id"></Input>
                            </Col>
                            <Col :span="6">
                            <Select v-model="search.notifyType" placeholder="请输入要查找的通知状态">
                                <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                            </Select>
                            </Col> -->
            <Col :span="12">
            <Button icon="ios-search" type="primary" @click="savesearch" style="margin-right:10px">筛选</Button>
            <Button  @click="clearSearch">查看全部</Button>
            </Col>
          </Row>
          </Col>
          <Col>
          <!-- <Button type="error" @click="delMultiple" class="margin-bottom-20">批量删除</Button> -->
          </Col>

        </Row>
        <Table stripe border :data="firebuildingObj.list" :loading="firebuildingObj.loading" :columns="firebuildingObj.columns" ref="firebuildList" @on-selection-change="selectionTable"></Table>
        <div class="pageWrap">
          <Page :total="firebuildingObj.count" :page-size="firebuildingObj.pageSize" show-total :current.sync="firebuildingObj.current" @on-change="pageChange"></Page>
        </div>
      </Card>
    </Row>
    <!-- 内容模块 -->
    <!-- <Modal v-model="firebuildingModal" :title="firebuildingObj.title" :mask-closable="false" :closable="false" width="1000">
      <Form :model="firebuildingForm" :label-width="120" ref="firebuildingForm" :rules="ruleValidate">
        <Row type="flex" justify="start">
          <Col :span="12">
          <FormItem label="经度" prop="longitude">
            <Input v-model="firebuildingForm.longitude" number></Input>
          </FormItem>
          </Col>
          <Col :span="12">
          <FormItem label="纬度" prop="latitude">
            <Input v-model="firebuildingForm.latitude" number></Input>
          </FormItem>
          </Col>
          <Col :span="12">
          <FormItem label="平台" prop="platformid">
            <Select v-model="firebuildingForm.platformid">
              <Option v-for="(item,index) in platformList" :value="item.ID" :key="item.ID">{{item.name}}</Option>
            </Select>
          </FormItem>
          </Col>
          <Col :span="12">
          <FormItem label="标题图片(750*480)" prop="imagesurl">
            <img-up-load :transmitData="firebuildingForm.imagesurl" @handleSuccess="handleImgUpLoadSuccess"></img-up-load>
          </FormItem>
          </Col>
          <Col :span="12">
          <FormItem v-for="(item, index) in firebuildingForm.mobile" :key="index" :label="'联系电话 ' + (index+1)" :rules="{required: true, message: '联系电话 ' + (index+1) +' 不能为空', trigger: 'blur'}" :prop="'mobile.' + index + '.value'">
            <Row>
              <Col span="18">
              <Input type="text" v-model="item.value" placeholder="请填写联系电话"></Input>
              </Col>
              <Col span="4" offset="1">
              <Button  v-if="index==0" @click="handleAdd" icon="md-add"></Button>
              <Button icon="minus-round" v-else  @click="handleRemove(index)"></Button>
              </Col>
            </Row>
          </FormItem>
          </Col>
        </Row>
        <Alert show-icon>
          <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">点击这里</a>查询经纬度</Alert>
        <Collapse v-model="value1">
          <Panel name="1" style="text-align:center">
            更多填写内容
            <div slot="content">
              <FormItem label="富文本" prop="title">
                <Editor ref="myQuillEditor" :content="firebuildingForm.text" @quillChange="quillChange"></Editor>
              </FormItem>
            </div>
          </Panel>
        </Collapse>
      </Form>
      <div slot="footer">
        <Button type="primary"  @click="savefirebuilding" v-if="firebuildingForm.ID">保存</Button>
        <Button type="primary"  @click="addfirebuilding" v-else>添加</Button>
        <Button   @click="formcancel('firebuildingForm','firebuildingModal')">取消</Button>
      </div>
    </Modal> -->
    <!-- 导入文件模块 -->
    <!-- <Modal v-model="importModal" title="导入文件" :mask-closable=" false">
      <Form :model="importForm" :label-width="100" ref="importForm" :rules="importRuleValidate">

        <FormItem label="选择文件" prop="file">
          <Upload :before-upload="handleUpload" :headers="Uploadhearders" :action="uploadUrl+'/api/uploadexcel'" name="file">
            <Button  icon="ios-cloud-upload-outline">选择要上传的文件</Button>
          </Upload>
          <div v-if="importForm.file !== null">将要上传的文件: {{ importForm.file.name }} </div>
          <div>导入的文件不可超过500条</div>
        </FormItem>
        <FormItem label="方式" prop="importype">
          <Radio-group v-model="importForm.importype">
            <Radio label="新增设备"></Radio>
            <Radio label="修改设备"></Radio>
          </Radio-group>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button v-if="importForm.file !== null"  type="primary" @click="upload" :loading="uploading">{{ uploading ? '导入中' : '进行导入' }}</Button>
        <Button   @click="formcancel('importForm','importModal')">关闭</Button>
      </div>
    </Modal> -->
  </div>

</template>
<script>
import axios from "axios";
import util from "@/libs/util";
import expandRow from "./table-expand.vue";
import imgUpLoad from "@/views/my-components/img-upLoad/img-upLoad";
import Editor from "@/views/my-components/quill/quill";
let firebuildingForm = {
  imagesurl: "",
  text: "",
  mobile: [{ value: "" }],
  longitude: "", //经度
  latitude: "" //纬度
};
let importForm = {
  file: null,
  importype: "新增设备"
};
export default {
  name: "firebuilding",
  components: {
    expandRow,
    imgUpLoad,
    Editor
  },
  data() {
    return {
      importModal: false,
      Uploadhearders: {
        Authorization: sessionStorage.getItem("auth")
      },
      importForm,
      uploading: false,
      firebuildingModal: false,
      value1: "",
      firebuildingForm,
      firebuildingObj: {
        list: [],
        columns: [
          {
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            type: "expand",
            width: 50,
            render: (h, params) => {
              return h(expandRow, {
                props: {
                  row: params.row
                }
              });
            }
          },
          {
            title: "所属单位",
            key: "companyname"
          },
          {
            title: "建筑名称",
            key: "name"
          },
          {
            title: "建筑编号",
            key: "number"
          },
          {
            title: "紧急联系人",
            key: "emergencycontact"
          },
          {
            title: "手机",
            key: "mobile",
            render: (h, params) => {
              return h("span", params.row.mobile[0]);
            }
          },
          {
            title: "操作",
            key: "action",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      
                      type: "primary"
                    },
                    style: {
                      marginRight: "10px"
                    },
                    on: {
                      click: () => {
                        this.getfirebuilding(params.row.ID);
                      }
                    }
                  },
                  "编辑"
                ), h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "您确认删除该信息？",
                      transfer: true
                    },
                    on: {
                      "on-ok": () => {
                        this.delfirebuilding(params.row.ID);
                      }
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small"
                        }
                      },
                      "删除"
                    )
                  ]
                )
              ]);
            }
          },
          {
            title: "查看设备",
            key: "query",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      
                      type: "ghost"
                    },
                    style: {
                      marginRight: "10px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: "equipment",
                          query: {
                            firebuildingid: params.row.ID
                          }
                        });
                      }
                    }
                  },
                  "关联设备"
                )
              ]);
            }
          }
        ],
        title: "",
        current: 1,
        count: 0,
        loading: true,
        pageSize: 10
      },
      ruleValidate: {
        longitude: [
          {
            required: true,
            message: "经度不能为空",
            trigger: "blur",
            type: "number"
          },
          {
            message: "必须是数字形式",
            trigger: "blur",
            type: "number"
          }
        ],
        latitude: [
          {
            required: true,
            message: "纬度不能为空",
            trigger: "blur",
            type: "number"
          },
          {
            message: "必须是数字形式",
            trigger: "blur",
            type: "number"
          }
        ],
        platformid: [
          {
            required: true,
            trigger: "change",
            message: "平台不能为空",
            type: "number"
          }
        ]
      },
      selectionList: [],
      platformList: []
    };
  },
  filters: {
  },
  computed: {},
  methods: {
    quillChange(txt) {
      this.firebuildingForm.text = txt;
    },
    handleImgUpLoadSuccess(url) {
      this.firebuildingForm.imagesurl = url;
    },
    savesearch() {
      this.firebuildingObj.current = 1;
      //   this.searchModal = false;
      this.getfirebuildingList();
    },
    clearSearch() {
      this.formcancel("search", "searchModal");
      this.savesearch();
    },
    //上传文件
    handleUpload(file) {
      this.importForm.file = file;
      // 返回false 阻止默认上传
      return false;
    },
    //上传文件
    upload() {
      if (this.uploading) return;
      this.$refs.importForm.validate(valid => {
        if (valid) {
          this.uploading = true;
          let param = new FormData(); //创建form对象
          param.append("excel", this.importForm.file);
          const config = {
            headers: { "Content-Type": "multipart/form-data" }
          };
          axios
            .post(`/uploadexcel`, param, config)
            .then(data => {
              this.importForm.dir = data;
              let method = "put";
              if (this.importForm.importype == "新增设备") {
                method = "post";
              }
              axios({
                url: `/admin/equiipment/improt`,
                data: this.importForm,
                method
              })
                .then(res => {
                  this.$Message.success("操作成功");
                  this.formcancel("importForm", "importModal");
                  this.uploading = false;
                  this.getequipmentList();
                })
                .catch(err => {
                  this.uploading = false;
                });
            })
            .catch(err => {
              this.$Message.warning("操作失败");
              this.uploading = false;
            });
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    //动态添加联系方式
    handleAdd() {
      this.firebuildingForm.mobile.push({
        value: ""
      });
    },
    //移除联系方式
    handleRemove(index) {
      this.firebuildingForm.mobile.splice(index, 1);
    },
    formcancel(...params) {
      util.resetData(this, ...params);
    },
    addModdel() {
      this.firebuildingObj.title = "添加信息";
      this.firebuildingForm = firebuildingForm;
      this.value1 = "";
      this.firebuildingModal = true;
    },
    savefirebuilding() {
      this.$refs.firebuildingForm.validate(valid => {
        if (valid) {
          let temp = JSON.parse(JSON.stringify(this.firebuildingForm));
          // temp.buildingdate = new Date(temp.buildingdate).getTime() / 1000
          // temp.mobile=temp.mobile.map(item=>{
          //   return item.value
          // })
          axios.put(`/admin/firebuilding/${temp.ID}`, temp).then(res => {
            this.$Message.success("操作成功");
            this.formcancel("firebuildingForm", "firebuildingModal");
            this.getfirebuildingList();
          });
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    addfirebuilding() {
      this.$refs.firebuildingForm.validate(valid => {
        if (valid) {
          let temp = JSON.parse(JSON.stringify(this.firebuildingForm));
          // if (temp.buildingdate) {
          //   temp.buildingdate = new Date(temp.buildingdate).getTime() / 1000
          // } else {
          //   temp.buildingdate = 0
          // }
          // temp.mobile=temp.mobile.map(item=>{
          //   return item.value
          // })
          axios.post(`/admin/firebuilding`, temp).then(res => {
            this.$Message.success("操作成功");
            this.formcancel("firebuildingForm", "firebuildingModal");
            this.getfirebuildingList();
          });
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
    },
    getfirebuildingList() {
      this.$store.commit('app/initSearch', {
        page: {
          current: this.firebuildingObj.current,
          pageSize: this.firebuildingObj.pageSize
        },
        search: this.search
      });
      this.firebuildingObj.loading = true;
      axios
        .get(`/admin/firebuildinglist`, {
          params: {
            page: this.firebuildingObj.current,
            size: this.firebuildingObj.pageSize
          }
        })
        .then(data => {
          this.firebuildingObj.list = data.Data;
          this.firebuildingObj.count = data.Count;
          this.firebuildingObj.loading = false;
        });
    },
    getfirebuilding(id) {
      axios.get(`/admin/firebuilding/${id}`).then(data => {
        this.firebuildingObj.title = "修改信息";
        this.firebuildingForm = data;
        this.firebuildingForm.mobile = this.firebuildingForm.mobile.map(
          item => {
            return { value: item };
          }
        );
        if (this.firebuildingForm.buildingdate) {
          this.firebuildingForm.buildingdate = new Date(
            this.firebuildingForm.buildingdate * 1000
          );
        } else {
          this.firebuildingForm.buildingdate = "";
        }

        this.value1 = "";
        this.firebuildingModal = true;
      });
    },
    delfirebuilding(id) {
      axios.delete(`/admin/firebuilding/${id}`).then(res => {
        this.$Message.success("操作成功");
        this.getfirebuildingList();
      });
    },
    pageChange(v) {
      this.firebuildingObj.current = v;
      this.getfirebuildingList();
    },
    delMultiple() {
      let _this = this;
      if (this.selectionList.length == 0) {
        return;
      }
      this.$Modal.confirm({
        title: "温馨提示",
        content: "是否确认删除?",
        onOk: () => {
          let ids = _this.selectionList.map(item => {
            return item.ID;
          });
          axios({
            method: "delete",
            url: "/admin/firebuildings",
            data: {
              ids
            },
            headers: {
              "Content-Type": "application/json"
            }
          }).then(res => {
            _this.$Message.success("操作成功");
            _this.getfirebuildingList();
          });
        },
        onCancel: () => { }
      });
    },
    selectionTable(e) {
      this.selectionList = e;
    },
    getplatformList() {
      axios
        .get(`/admin/platformlist`, {
          params: {
            page: 1,
            size: 999
          }
        })
        .then(data => {
          this.platformList = data.Data;
        });
    },
    // 需要刷新的内容
    refreshFn() {
      this.getfirebuildingList();
    },
  },
  created() {
    this.getplatformList();
    this.getfirebuildingList();
  },
  mounted() {
    const storeSearch = this.$store.state.app.search[this.$route.name];
    if (storeSearch) {
      const {
        search,
        page: { current, pageSize }
      } = storeSearch;
      this.search = search;
      this.firebuildingObj.current = current;
      this.firebuildingObj.pageSize = pageSize;
    }
    this.$store.commit('app/initRefresh");
    const storeRefresh = this.$store.state.app.refresh.find(item => {
      return item.name == this.$route.name;
    });
    storeRefresh.refreshFn = this.refreshFn;
  }
};
</script>
